var DrawPanel = function (objId) {
  var that = this
  var getDom = function (id) {
    return document.getElementById(id)
  }
  var obj = getDom(objId)
  var getContext = function (dom) {
    return dom.getContext('2d')
  }
  var ctx = getContext(obj)
  // var drawLine = function (start, end) {
  //   var x = start.x || 0,
  //     y = start.y || 0,
  //     x1 = end.x || 0,
  //     y1 = end.y || 0
  //   ctx.moveTo(x, y)
  //   ctx.lineTo(x1, y1)
  //   ctx.stroke()
  // }
  var stroke = function() {
    ctx.stroke()
  }
  // 画线
  var drawLine = {
    move: function (x, y) {
      ctx.moveTo(x, y)
    },
    lineTo: function (x, y) {
      ctx.lineTo(x, y)
      ctx.stroke()
    }
  }
  // 获取实际的坐标位置
  var getPosition = function (x, y) {
    console.info(x, y)
    var rect = obj.getBoundingClientRect()
    return {
      x: x - rect.left,
      y: y - rect.top
    }
  }
  var mouseDownCallBack = this.mouseDownCallBack || function () {}
  obj.onmousedown = function (e) {
    var event = e || window.events
    var spst = getPosition(event.clientX, event.clientY)
    drawLine.move(spst.x, spst.y)
    obj.onmousemove = function (me) {
      var moveEvent = me || window.event
      var movepst = getPosition(moveEvent.clientX, moveEvent.clientY)
      console.info(obj.style)
      drawLine.lineTo(movepst.x, movepst.y)
    }
    obj.onmouseup = function () {
      obj.onmousemove = null
      obj.onmouseup = null
    }
    mouseDownCallBack.call(obj, event.clientX, event.clientY)
  }
  return {
    drawLine: drawLine,
    getPosition: getPosition,
    mouseDownCallBack: function () {},
    mousedown: onmousedown
  }
}

var panel = new DrawPanel('panel')
panel.mouseDownCallBack(function (event) {
  console.info('mousedown', this, event)
})
// panel.drawLine({ x: 20, y: 30 }, { x: 80, y: 100 })
